<template>
  <div>
    <div class="box">
      <img :src="detailInfo.CoverPhoto" alt="" />
      <span @click="pushImg" class="pic_count"
        >{{ detailInfo.pic_group_count }}张照片</span
      >
    </div>
    <div>
      <van-button @click="pushDealer()" type="info"> 询问底价 </van-button>
    </div>
    <div class="years">
      <span @click="all" :class="count === -1 ? 'active' : ''">全部</span>
      <span
        v-for="(value, key, index) in obj"
        @click="changeCount(index, key)"
        :class="{ active: count === index }"
      >
        {{ key }}
      </span>
    </div>

    <div>
      <ul>
        <li v-for="(value, keys, index) in obj[key]" :key="index">
          <div class="type">
            {{ value[0].exhaust_str }} / {{ value[0].max_power_str }} /
            {{ value[0].inhale_type }}
          </div>
          <div class="pattern" v-for="item in value" :key="item.car_id">
            <p>{{ item.market_attribute.year }}款 {{ item.car_name }}</p>
            <p>{{ item.horse_power }}马力{{ item.gear_num }}档</p>
            <div @click="pushDealer(item?.car_id)">询问底价</div>
          </div>
        </li>
      </ul>
      <!-- 全部的 -->
      <ul v-show="count === -1">
        <li v-for="(value, key, index) in obj" :key="index">
          <div v-for="(value2, key2, indexs) in value" :key="indexs">
            <div class="type">
              {{ value2[0].exhaust_str }} / {{ value2[0].max_power_str }} /
              {{ value2[0].inhale_type }}
            </div>
            <div class="pattern" v-for="item in value2" :key="item.car_id">
              <p>{{ item.market_attribute.year }}款 {{ item.car_name }}</p>
              <p>{{ item.horse_power }}马力{{ item.gear_num }}档</p>
              <div @click="pushDealer(item?.car_id)">询问底价</div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- <span :class="count == -1 ? 'active' : ''" @click="quan">全部</span>
    <span
      v-for="(value, key, index) in obj"
      @click="changeCount(index, key)"
      :class="index == count ? 'active' : ''"
      :key="index"
      >{{ key }}</span
    > -->

    <!-- <div v-show="count !== -1">
      <h3 v-for="(item, index) in obj[key]" :key="index">
        {{ item.car_name }}
      </h3>
    </div>
    <div v-show="count == -1">
      <h3 v-for="(item, index) in detailInfo.list" :key="index">
        {{ item.car_name }}
      </h3>
    </div> -->
  </div>
</template>

<script>
import { getInfoAndList } from "@/api/carList";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      detailInfo: {},
      tabList: [], //全部和所有年份
      count: -1,
      obj: {},
      key: "",
      carId: "",
    };
  },
  computed: {
    ...mapState("CarList", ["yearList"]),
  },
  async created() {
    //之前拿不到数据是因为少了async await
    let res = await getInfoAndList({ SerialID: this.$route.params.id });
    this.detailInfo = res; //车型的详情
    res.list.forEach((item) => this.tabList.push(item.market_attribute.year));
    this.tabList = Array.from(new Set(this.tabList));
    this.tabList.unshift("全部");
    console.log("所有年份", this.tabList);
    // getInfoAndList({ SerialID: this.$route.params.id }).then(
    //   (res) => (this.detailInfo = res)
    // );
    res.list.forEach((item) => {
      //高级
      if (this.obj[item.market_attribute.year]) {
        //如果有年份
        if (this.obj[item.market_attribute.year][item.max_power]) {
          //如果有马力
          this.obj[item.market_attribute.year][item.max_power].push(item);
        } else {
          //如果没马力
          this.obj[item.market_attribute.year][item.max_power] = [item];
        }
      } else {
        //如果没年份
        this.obj[item.market_attribute.year] = {
          [item.max_power]: [item], //item变为数组形式
        };
      }
    });
    this.setYearList(this.obj); //把车型年份数据存到vuex
    console.log("obj", this.obj);

    //最近年份下第一项的第一项车款id
    this.carId = Object.values(this.obj[this.tabList[1]])[0][0].car_id;
    // let arr = this.obj[this.tabList[1]];
    console.log("carId", this.carId);
  },
  methods: {
    ...mapMutations("CarList", ["setYearList"]),
    pushImg() {
      this.$router.push("/img/" + this.$route.params.id);
    },
    changeCount(index, key) {
      this.count = index; //index是索引下标
      this.key = key; //key是年份
    },
    all() {
      this.count = -1;
      this.key = "";
    },
    pushDealer(id) {
      //跳转咨询页
      console.log("/Dealer/" + this.carId);
      this.$router.push("/Dealer/" + (id ? id : this.carId)); //需要括号一下才正常
      // this.$router.push(`/Dealer/${id ? id : this.carId}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  position: relative;
  img {
    width: 100%;
  }
  .pic_count {
    position: absolute;
    bottom: 6px;
    right: 6px;
    color: #fff;
    padding: 2px 3px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 12px;
  }
}
.active {
  color: skyblue;
}
.years {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}
.type {
  background: rgba(128, 128, 128, 0.2);
  padding: 5px;
}
.pattern {
  p:first-of-type {
    font-size: 15px;
    padding: 10px;
  }
  p:nth-of-type(2) {
    font-size: 13px;
    color: grey;
    padding: 0 10px 10px 10px;
  }
  div {
    margin-bottom: 15px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    text-align: center;
    color: skyblue;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
  }
}
</style>
